<template>
  <div class="wrap">
    <div class="header">
      <a-button @click="handleSubmit" type="primary">{{ useState === '6,8' ? t('in') : t('out') }}</a-button>
      <a-button @click="changeUseState" style="margin-left: 12px">{{ useState === '6,8' ? t('changeIn') : t('changeOut') }}</a-button>
      <a-button @click="reload" type="primary">{{ common('redo') }}</a-button>
    </div>
    <div class="content"> <BasicTable @register="registerTable" :rowSelection="rowSelection" /></div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, unref, toRaw } from 'vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import { columns } from '../AssetInfo.data';
  import { list, outBoundAssetByIds, inBoundAssetByIds } from '@/views/asset/asset-info/AssetInfo.api';
  import { useUserStore } from '/@/store/modules/user';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n('asset.assetInfo.stateChange');
  const { t: common } = useI18n('common');
  const { createMessage } = useMessage();
  const userStore = useUserStore();
  // 声明Emits
  const emit = defineEmits(['select', 'register']);
  const checkedKeys = ref<Array<string | number>>([]);

  const props = defineProps({
    queryParam: { type: Object, default: () => ({}) },
  });
  const useState = ref('6,8');
  const changeUseState = () => {
    useState.value = useState.value === '6,8' ? '7' : '6,8';
    reload();
  };
  setTimeout(() => {
    reload();
  }, 20000);
  //注册table数据
  const [registerTable, { getSelectRows, reload }] = useTable({
    api: list,
    title: '待出库资产',
    beforeFetch: (params) => {
      return Object.assign(params, { column: 'createTime', order: 'desc', useState: useState.value, ...props.queryParam });
    },
    rowKey: 'id',
    columns: columns.slice(0, 6),
    striped: true,
    useSearchForm: false,
    showTableSetting: false,
    bordered: true,
    showIndexColumn: false,
    canResize: false,
  });
  /**
   * 选择列配置
   */
  const rowSelection: any = {
    type: 'checkbox',
    columnWidth: 50,
    selectedRowKeys: checkedKeys,
    onChange: onSelectChange,
  };
  /**
   * 选择事件
   */
  function onSelectChange(selectedRowKeys: (string | number)[]) {
    checkedKeys.value = selectedRowKeys;
  }

  //提交事件
  function handleSubmit() {
    //刷新列表
    const data = getSelectRows();
    const id = toRaw(unref(checkedKeys));
    console.log(id, 'idididd');
    if (id.length) {
      if (useState.value === '6,8') {
        outBoundAssetByIds({ assertIds: id.toString(), userId: userStore.userInfo?.username }).then(() => reload());
      } else {
        inBoundAssetByIds({ assertIds: id.toString(), userId: userStore.userInfo?.username }).then(() => reload());
      }
    } else {
      createMessage.error('请选择资产');
      console.log(data, id, userStore.userInfo);
    }
  }
</script>
<style lang="less" scoped>
  .wrap {
    height: 100%;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    flex-direction: column;
    .header {
      background-color: #fff;
      margin-bottom: 10px;
      padding: 6px;
    }
    .content {
      background-color: #fff;
      flex: 1;
    }
  }
</style>
